<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue-router</title>
  </head>
  <body>
    <pre>
        props: (route) => ({ id: route.params.id,name: 'nans', age: '100', }),
    </pre>
    <div id="app">
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
      <router-link to="/test/1">test</router-link>
      <router-link to="/test/sffds">test</router-link>
      <router-link to="/test/3">test</router-link>
      <router-link to="/test/4">test</router-link>
      <router-link to="/test/5">test</router-link>
      <router-view></router-view>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <script>
      const login = {
        template: `
                   <div>
                     <h1>login</h1>
                     <h1>login</h1>
                   </div>
                     `,
      }
      const regiest = {
        template: `
                   <div>
                     <h1>regiest</h1>
                     <h1>login</h1>
                   </div>
                     `,
      }

      const children1 = {
        props: ['id', 'name', 'age'],
        template: `
                     <h1>{{id}}children1 {{name}}{{age}}</h1>
                     `,
      }
      //   const routers = new VueRouter({
      //     routes: [
      //       { path: '/', redirect: '/register' },
      //       { path: '/login', component: login },
      //       { path: '/register', component: regiest },
      //       {
      //         path: '/test/:id',
      //         component: children1,
      //         props: function (route) {
      //           return {
      //             id: route.params.id,
      //             name: 'nans',
      //             age: '100',
      //           }
      //         },
      //       },
      //     ],
      //   })
      //   const User = {
      //     props: ['uname', 'age', 'id'],
      //     template: `<div>用户信息：{{ uname + '---' + age + '---' + id}}</div>`,
      //   }

      //   const router = new VueRouter({
      //     routes: [
      //       {
      //         path: '/user/:id',
      //         name: 'user',
      //         component: User,
      //       },
      //     ],
      //   })
      //   <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
      //   const User = {
      //     template:
      //       '<div><button @click="goRegister">跳转到注册页面</button></div>',
      //     methods: {
      //       goRegister: function () {
      //         // 用编程的方式控制路由跳转
      //         this.$router.push('/register')
      //       },
      //     },
      //   }

      const vm = new Vue({
        el: '#app',
        data: {},
        router: routers,
      })
    </script>
  </body>
</html>
